//导航栏动画效果
class NavMove {
    constructor() {
        this.getELe();
        this.riseADropOne();
        this.riseADropdropTwo();
    }

    getELe() {
        this.navLeft = document.querySelector('.nav_left');
        this.navRight = document.querySelector('.nav_right');
        this.logoBox = document.querySelector('.logo_box');
        this.logoDiv = this.logoBox.querySelector('div');
    }

    riseADropOne() {
        for (let i = 0; i < this.navLeft.children[0].children.length; i++) {
            this.navLeft.children[0].children[i].children[0].addEventListener('mouseenter', () => {
                if (this.navLeft.children[0].children[i].children[0].className === 'a_rise focus') {
                    return;
                } else if (this.navLeft.children[0].children[i].children[0].className !== 'a_rise') {
                    this.navLeft.children[0].children[i].children[0].className = 'a_rise';
                }
            })
            this.navLeft.children[0].children[i].children[0].addEventListener('mouseleave', () => {
                if (this.navLeft.children[0].children[i].children[0].className === 'a_rise focus') {
                    return;
                } else if (this.navLeft.children[0].children[i].children[0].className === 'a_rise') {
                    this.navLeft.children[0].children[i].children[0].className = 'a_drop';
                }
            })
        }
    }

    riseADropdropTwo() {
        for (let i = 0; i < this.navRight.children[0].children.length; i++) {
            this.navRight.children[0].children[i].children[0].addEventListener('mouseenter', () => {
                if (this.navRight.children[0].children[i].children[0].className === 'a_rise focus') {
                    return;
                } else if (this.navRight.children[0].children[i].children[0].className !== 'a_rise') {
                    this.navRight.children[0].children[i].children[0].className = 'a_rise';
                }
            })
            this.navRight.children[0].children[i].children[0].addEventListener('mouseleave', () => {
                if (this.navRight.children[0].children[i].children[0].className === 'a_rise focus') {
                    return;
                } else if (this.navRight.children[0].children[i].children[0].className === 'a_rise') {
                    this.navRight.children[0].children[i].children[0].className = 'a_drop';
                }
            })
        }
    }
}

//logo放大效果
class logoScale extends NavMove {
    logoScaleAni() {
        this.logoDiv.addEventListener('mouseenter', () => {
            this.logoDiv.className = 'logo_scale';
        }, false)
        this.logoDiv.addEventListener('mouseleave', () => {
            this.logoDiv.className = 'logo_scale_2';
        }, false)
    }
}

new NavMove();
new logoScale().logoScaleAni();


